<template>
  <div>
    <el-input v-model="nv[fvData.fdName]" :disabled="disabled" v-if="nv">
      <template #suffix>
        <el-icon class="el-input__icon" @click="search()"><search /></el-icon>
      </template>
    </el-input>
    <NvFilterDialog ref="nvFilterDialog"></NvFilterDialog>
  </div>
</template>

<script>
import { computed, getCurrentInstance, defineAsyncComponent } from 'vue'
import { Search } from '@element-plus/icons-vue'
import filterDialogUtils from "../../js/dialog/FilterDialogUtils";
export default {
  name: 'FvFilterInput',
  components: {
    Search,
    NvFilterDialog: defineAsyncComponent(() => import('@/views/basic/NvFilterDialog.vue'))
  },
  props: {
    fvData: {
      default: null,
      type: Object
    }
  },
  setup(props) {
    const nv = computed(() => {
      return props.fvData.getNv();
    });
    const disabled = false;
    const currentInstance = getCurrentInstance();
    function search() {
      filterDialogUtils.filter({ fvData: props.fvData }, currentInstance.refs.nvFilterDialog);
    }
    return {
      nv,
      disabled,
      search
    }
  }
}
</script>

<style scoped>

</style>
